<template>
  <!-- <div class="menuList accountMana" :style="{ height: wraHeight}"> -->
  <div class="menuList accountMana">
    <div class="showHideBtn">
      <i
        @click="showOrHide"
        v-if="isCollapse"
        class="icon iconfont icon-zhankai"
      ></i>
      <i
        style="padding-left:145px"
        v-if="!isCollapse"
        @click="showOrHide"
        class="icon iconfont icon-shouqi"
      ></i>
    </div>
    <el-menu
      :default-active="defaultIndex"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      :unique-opened="true"
    >
      <el-submenu
        v-for="item in menuListData"
        :index="item.index"
        :key="item.index"
      >
        <template slot="title">
          <i :class="item.class"></i>
          <span
            slot="title"
            style="font-size:16px"
          >{{item.title}}</span>
        </template>
        <el-menu-item-group
          :key="items.index"
          v-for="items in item.childrenItem"
        >
          <el-menu-item
            v-if="!items.children"
            :index="items.index"
            @click="goPages(items.path,items.index)"
          >{{items.title}}</el-menu-item>
          <el-submenu
            v-else
            :index="items.index"
            :key="items.index"
          >
            <span slot="title">{{items.title}}</span>
            <el-menu-item
              v-for="child in items.children"
              :key="child.index"
              :index="child.index"
              @click="goPages(child.path, child.index)"
            >{{child.title}}</el-menu-item>
          </el-submenu>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      wraHeight: "calc(100vh - 101px)",
      isCollapse: false,
      flag: false,
      wrapperHeight: 0,
      defaultIndex: "1-1",
      menuListData: [
        {
          index: "1",
          title: "信息流数据管理",
          class: "icon iconfont icon-xinxifenliu",
          childrenItem: [
            {
              index: "1-1",
              title: "账号数据",
              path: "/infoFlowData/accountData"
            },
            {
              index: "1-2",
              title: "账号管理",
              path: "/infoFlowData/accountManage"
            },
            {
              index: "1-3",
              title: "产品管理",
              path: "/infoFlowData/productManage"
            },
            {
              index: "1-4",
              title: "客户管理",
              path: "/infoFlowData/customManage"
            },
            {
              index: "1-5",
              title: "平台管理",
              path: "/infoFlowData/platformManage"
            },
            {
              index: "1-6",
              title: "客户合同管理",
              path: "/infoFlowData/customContractManage"
            },
            {
              index: "1-7",
              title: "平台合同管理",
              path: "/infoFlowData/platformContractManage"
            },
            {
              index: "1-8",
              title: "客户预收",
              path: "/infoFlowData/customAdvance"
            },
            {
              index: "1-9",
              title: "客户对账",
              path: "/infoFlowData/customAccount"
            },
            {
              index: "1-10",
              title: "客户结算单",
              path: "/infoFlowData/customSettlement"
            },
            {
              index: "1-11",
              title: "客户预收结算单",
              path: "/infoFlowData/customAdvanceSettlement"
            },
            {
              index: "1-12",
              title: "平台对账",
              path: "/infoFlowData/platformReconciliation"
            },
            {
              index: "1-13",
              title: "平台结算单",
              path: "/infoFlowData/platformStatement"
            },
            {
              index: "1-14",
              title: "人员绩效管理",
              path: "/infoFlowData/personnelPerformanceManage"
            }
          ]
        },
        // CPA数据管理
        {
          index: "2",
          title: "CPA数据管理",
          class: "icon iconfont icon-xinxifenliu",
          childrenItem: [
            {
              index: "2-1",
              title: "产品数据管理",
              children: [
                {
                  index: "2-1-1",
                  title: "数据报表",
                  path: "/cpaDataMana/realTimeData"
                },
                {
                  index: "2-1-2",
                  title: "数据刷新",
                  path: "/cpaDataMana/realTimeDataUpdate"
                },
                {
                  index: "2-1-3",
                  title: "数据抓取",
                  path: "/cpaDataMana/contentGrab"
                }
              ]
            },
            {
              index: "2-2",
              title: "客户/渠道管理",
              children: [
                {
                  index: "2-2-1",
                  title: "客户信息",
                  path: "/cpaDataMana/customerInfoMana"
                },
                {
                  index: "2-2-2",
                  title: "渠道信息",
                  path: "/cpaDataMana/channelInfoMana"
                },
                {
                  index: "2-2-3",
                  title: "产品管理",
                  path: "/cpaDataMana/customerProMana"
                },
                {
                  index: "2-2-4",
                  title: "投放管理",
                  path: "/cpaDataMana/channelProMana"
                }
              ]
            },
            {
              index: "2-3",
              title: "对账管理",
              children: [
                {
                  index: "2-3-1",
                  title: "批量调价(客户)",
                  path: "/cpaDataMana/changePrices"
                },
                {
                  index: "2-3-2",
                  title: "客户对账",
                  path: "/cpaDataMana/customerAccountBill"
                },
                {
                  index: "2-3-3",
                  title: "批量调价(渠道)",
                  path: "/cpaDataMana/changeChannelPrices"
                },
                {
                  index: "2-3-4",
                  title: "渠道对账",
                  path: "/cpaDataMana/channelAccountBill"
                }
              ]
            },
            {
              index: "2-4",
              title: "结算管理",
              children: [
                {
                  index: "2-4-1",
                  title: "客户月结",
                  path: "/cpaDataMana/customerAccount"
                },
                {
                  index: "2-4-2",
                  title: "客户预收",
                  path: "/cpaDataMana/customerCollect"
                },
                {
                  index: "2-4-3",
                  title: "预收管理",
                  path: "/cpaDataMana/customerCollectMana"
                },
                {
                  index: "2-4-4",
                  title: "渠道月结",
                  path: "/cpaDataMana/channelAccount"
                },
                {
                  index: "2-4-5",
                  title: "渠道预收",
                  path: "/cpaDataMana/channelPay"
                },
                {
                  index: "2-4-6",
                  title: "预付管理",
                  path: "/cpaDataMana/channelPayMana"
                }
              ]
            },
            {
              index: "2-5",
              title: "合同管理",
              children: [
                {
                  index: "2-5-1",
                  title: "客户合同",
                  path: "/cpaDataMana/customerContractMana"
                },
                {
                  index: "2-5-2",
                  title: "渠道合同",
                  path: "/cpaDataMana/channelContractMana"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  computed: {
    // wraHeight(){
    //   return this.$store.state.wraHeight;
    // }
  },
  mounted() {
    this.defaultIndex = this.$route.meta.index;
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    showOrHide() {
      this.flag = !this.flag;
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.$store.state.paddingWidth = 90;
        this.$store.state.wraColrWidth = "calc(100vw - 115px)";
        $(".accountWra .el-table__header-wrapper").css("left", 91);
      } else {
        this.$store.state.paddingWidth = 225;
        this.$store.state.wraColrWidth = "calc(100vw - 250px)";
        $(".accountWra .el-table__header-wrapper").css("left", 226);
      }
    },
    goPages(url, index) {
      this.defaultIndex = index;
      this.$router.push({ path: url });
    }
  }
};
</script>
<style>
.menuList {
  background: #fff;
  border-right: solid 1px #e6e6e6;
  overflow-y: auto;
  position: fixed;
  left: 0;
  z-index: 999;
  height: calc(100vh - 101px);
  /* height: 100%; */
}
.menuList::-webkit-scrollbar {
  display: none;
}
.menuList .buttonIcon {
  height: 40px;
  line-height: 40px;
}
.menuList .buttonIcon .icon-shouqi {
  float: right;
  padding-right: 10px;
}
.menuList .buttonIcon .icon-zhankai {
  float: left;
  padding-left: 20px;
}
.icon-xinxifenliu {
  font-size: 20px;
}
.menuList .icon-shouqi,
.menuList .icon-zhankai {
  font-size: 20px;
}
.menuList .el-menu-item-group__title {
  padding: 0;
}
.menuList .el-menu-item:focus,
.el-menu-item:hover {
  background-color: #ecf5ff;
}
.menuList .el-menu-item.is-active {
  background-color: #ecf5ff;
}
.menuList .el-menu {
  border: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.menuList .showHideBtn {
  padding: 10px 0px 10px 22px;
}
.el-menu--vertical {
  overflow-y: auto;
  height: 100%;
}
.el-menu--vertical::-webkit-scrollbar {
  display: none;
}
</style>

